<%- include('layout/header', { title: '微博 - 设置', isNav: true })%>

<div class="container margin-top-20">
  <div class="row">
    <!-- 左侧 -->
    <div class="col-8">
      <h5 class="margin-bottom-10">基本信息</h5>
      <form>
        <div class="form-group row">
          <label for="input-nick" class="col-sm-2 col-form-label">昵称</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input-nick" placeholder="请输入昵称" value="<%= nickName%>">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-city" class="col-sm-2 col-form-label">城市</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input-city" placeholder="请输入城市" value="<%= city%>">
          </div>
        </div>
        <div class="form-group row">
          <label for="file-picture" class="col-sm-2 col-form-label">头像</label>
          <div class="col-sm-10">
            <img src="<%= picture%>" style="width: 100px;" class="margin-bottom-10" id="img-picture" />
            <input type="file" class="form-control-file" accept="image/*" id="file-picture">
          </div>
        </div>
        <center><button type="submit" class="btn btn-primary" id="btn-submit-info">保存</button></center>
      </form>

      <hr />
      <h5 class="margin-bottom-10">修改密码</h5>
      <form>
        <div class="form-group row">
          <label for="input-cur-password" class="col-sm-2 col-form-label">当前密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-cur-password" placeholder="请输入当前密码">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-new-password" class="col-sm-2 col-form-label">新密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-new-password" placeholder="请输入新密码">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-new-password-repeat" class="col-sm-2 col-form-label">确认密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-new-password-repeat" placeholder="请输入确认密码">
          </div>
        </div>
        <center><button type="submit" class="btn btn-primary" id="btn-submit-password">提交</button></center>
      </form>

      <hr />
      <center><button class="btn btn-danger" id="btn-logout">退出登录</button></center>

    </div> <!-- 左侧结束 -->

    <!-- 右侧 -->
    <div class="col-4">
    </div> <!-- 右侧结束 -->
  </div>
</div>

<script>
  $(function () {
    // 上传图片
    var $imgPicture = $('#img-picture')
    var $filePicture = $('#file-picture')
    $filePicture.change(function (e) {
      var file = $filePicture[0].files[0]
      ajax.upload('/api/utils/upload', file, function (err, data) {
        if (err) {
          alert(err)
          return
        }
        // 成功
        $imgPicture.attr('src', data.url)
      })
    })

    // 修改基本信息
    var $inputNick = $('#input-nick')
    var $inputCity = $('#input-city')
    $('#btn-submit-info').click(function (e) {
      e.preventDefault()
      var nickName = $inputNick.val()
      var city = $inputCity.val()
      var picture = $imgPicture.attr('src')

      ajax.patch('/api/user/changeInfo', {
        nickName,
        city,
        picture
      }, function (err, data) {
        if (err) {
          alert(err)
          return
        }
        alert('修改成功')
      })
    })

    // 修改密码
    var $inputCurPassword = $('#input-cur-password')
    var $inputNewPassword = $('#input-new-password')
    var $inputNewPasswordRepeat = $('#input-new-password-repeat')
    $('#btn-submit-password').click(function (e) {
      e.preventDefault()
      var curPassword = $inputCurPassword.val()
      var newPassword = $inputNewPassword.val()
      var newPasswordRepeat = $inputNewPasswordRepeat.val()

      if (newPassword !== newPasswordRepeat) {
        alert('两次新密码输入不一致')
        return
      }
      if (curPassword === newPassword) {
        alert('新密码和当前密码一致')
        return
      }

      ajax.patch('/api/user/changePassword', {
        password: curPassword,
        newPassword: newPassword
      }, function (err, data) {
        if (err) {
          alert(err)
          return
        }
        alert('修改成功')
        $inputCurPassword.val('')
        $inputNewPassword.val('')
        $inputNewPasswordRepeat.val('')
      })
    })

    // 退出登录
    $('#btn-logout').click(function () {
      if (confirm('是否确定退出登录？') === false) {
        return
      }
      ajax.post('/api/user/logout', function (err, data) {
        if (err) {
          console.error(err)
          return
        }
        alert('已成功退出')
        location.href = '/login'
      })
    })
  })
</script>

<%- include('layout/footer')%>